<template>
  <div>
    <el-container>
      <el-header v-if="searchVisible">
        <el-card>
          <el-form :inline="true">
            <el-form-item>
              <div class="block">
                <span class="demonstration">年</span>
                <el-date-picker
                  v-model="year"
                  value-format="yyyy"
                  style="width: 150px"
                  type="year"
                  placeholder="请选择年份"
                />
              </div>
            </el-form-item>
            <el-form-item>
              <div>
                <span>季度</span>
                <el-select
                  v-model="quarter"
                  clearable="true"
                  placeholder="请选择季度"
                  style="width: 150px"
                >
                  <el-option v-for="item in quarterOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </div>
            </el-form-item>
<!--            <el-form-item>-->
<!--              <div>-->
<!--                <span>类型</span>-->
<!--                <el-select-->
<!--                  v-model="type"-->
<!--                  clearable="true"-->
<!--                  placeholder="请选择类型"-->
<!--                  style="width: 150px"-->
<!--                >-->
<!--                  <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />-->
<!--                </el-select>-->
<!--              </div>-->
<!--            </el-form-item>-->
            <el-form-item>
              <el-button icon="el-icon-search" circle @click="getEnrollmentInfo" />
              <!--              <el-button type="primary" @click="getEnrollmentInfo">查询招生简章信息</el-button>-->
              <el-button v-if="chooseSearch" type="text" @click="getAllInfo">返回总列表</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-header>
      <el-main>
        <el-card v-if="tableDataVisible">
          <el-table :data="tableData" style="width: 100%" :show-overflow-tooltip="true" size="small" stripe="">
            <el-table-column prop="year" label="年份" width="180">
              <template slot-scope="scope">
                {{ scope.row.year ? scope.row.year :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="quarter" label="季度" width="180">
              <template slot-scope="scope">
                {{ scope.row.quarter===1 ? '春季':scope.row.quarter===2 ?'夏季':scope.row.quarter===3 ?'秋季':scope.row.quarter===4 ?'冬季':暂无 }}
              </template>
            </el-table-column>
            <el-table-column prop="year" label="类型（班级）">
              <template slot-scope="scope">
                {{ scope.row.type===0 ? '学校招生':scope.row.type===1?scope.row.class_name ?'教学班招生（'+scope.row.class_name+'）' :'教学班招生（暂无）':'暂无' }}
              </template>
            </el-table-column>
<!--                        <el-table-column prop="class_name" label="教学班">-->
<!--                          <template slot-scope="scope">-->
<!--                            {{ scope.row.class_name ? scope.row.class_name :'暂无' }}-->
<!--                          </template>-->
<!--                        </el-table-column>-->
            <el-table-column prop="content" label="内容">
              <template slot-scope="scope">
                {{ scope.row.content ? scope.row.content.replace(/<[^>]+>/g, "").substring(0,8)+ '...':'暂无' }}
              </template>
            </el-table-column>
            <el-table-column width="150px" label="操作">
              <template slot-scope="scope ">
                <el-button type="text" @click="handleClick(scope.row.bioeid)"> 查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="chooseAll"
            :current-page="page.pageNum"
            :total="page.totalSize"
            @current-change="handleCurrentChange"
          />
          <el-pagination
            v-if="chooseSearch"
            :current-page="pageSearch.pageNumSearch"
            :total="pageSearch.totalSizeSearch"
            @current-change="handleCurrentChange"
          />
        </el-card>
        <el-card v-if="dialogFormVisible" style="height: 800px" class="firstCard">
          <el-row class="row">
            <span class="text"><b>招生简章详情</b></span>
            <!--            <el-button class="refreshButton" type="primary" @click="refresh">刷新</el-button>-->
            <!--            <el-button class="backButton" type="text" @click="handleClickBack" >返回列表</el-button>-->
            <el-button class="backButton" type="primary" size="small" @click="handleClickBack">返回</el-button>
          </el-row>
          <el-card class="card-content" style="height: 800px">
            <div>
              <!--              <span id="spanContent" class="info">{{ content }}</span>-->
              <p v-html="content" />
            </div>
          </el-card>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getIntroductionOfEnrollment } from '../../../api/enroll'
import { getEnrollmentInfo } from '../../../api/enroll'

export default {
  name: 'Index',
  data() {
    return {
      chooseAll: true,
      chooseSearch: false,
      bioeidSave: '',
      direction: 'ttb',
      content: '',
      searchVisible: true,
      tableDataVisible: true,
      dialogFormVisible: false,
      quarter: '',
      year: '',
      type: '',
      typeOptions: [
        {
          id: '0',
          name: '学校招生'
        },
        {
          id: '1',
          name: '教学班招生'
        }
      ],
      quarterOptions: [
        {
          id: '1',
          name: '春季'
        },
        {
          id: '2',
          name: '夏季'
        },
        {
          id: '3',
          name: '秋季'
        },
        {
          id: '4',
          name: '冬季'
        }
      ],
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      pageSearch: {
        pageNumSearch: 1,
        pageSizeSearch: 10,
        totalPageSearch: 0,
        totalSizeSearch: 0
      }
    }
  },
  created() {
    this.getAllInfo()
  },
  methods: {
    handleCurrentChange(val) {
      if (this.chooseSearch === false) {
        this.page.pageNum = val
        this.getAllInfo()
      } else if (this.chooseSearch === true) {
        this.pageSearch.pageNumSearch = val
        this.getEnrollmentInfo()
      }
    },
    handleClickBack() {
      this.dialogFormVisible = false
      this.tableDataVisible = true
      this.searchVisible = true
    },
    // refresh() {
    //   this.handleClick(this.bioeidSave)
    // },
    handleClick(bioeid) {
      this.bioeidSave = bioeid
      console.log(bioeid)
      getEnrollmentInfo(bioeid).then(res => {
        this.content = res.data.content
        this.searchVisible = false
        this.tableDataVisible = false
        this.dialogFormVisible = true
        // this.$message.success('获取招生简章内容成功！')
      })
        // .catch(err => {
        //   this.$message.error('获取招生简章内容失败！')
        // })
    },
    getAllInfo() {
      this.chooseSearch = false
      this.chooseAll = true
      getIntroductionOfEnrollment({
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.page = res.data.page
        this.year = ''
        this.quarter = ''
        this.type = ''
        // this.$message.success('请求招生简章列表成功！')
      })
        // .catch(err => {
        //   this.$message.error('请求招生简章列表失败！')
        // })
    },
    getEnrollmentInfo() {
      if (this.year === '' && this.quarter === '' && this.type === '') {
        alert('请先选择查询依据！')
      } else {
        this.chooseAll = false
        this.chooseSearch = true
        getIntroductionOfEnrollment({
          pageNum: this.pageSearch.pageNumSearch,
          pageSize: this.pageSearch.pageSizeSearch,
          year: this.year,
          quarter: this.quarter,
          type: this.type
        }).then(res => {
          this.tableData = res.data.list
          this.pageSearch.pageNumSearch = res.data.page.pageNum
          this.pageSearch.pageSizeSearch = res.data.page.pageSize
          this.pageSearch.totalPageSearch = res.data.page.totalPage
          this.pageSearch.totalSizeSearch = res.data.page.totalSize
          this.$message.success('请求招生简章列表成功！')
          if (res.data.list.length === 0) {
            this.$message.warning('暂无招生简章列表！')
          }
        })
          // .catch(err => {
          //   this.$message.error('请求招生简章列表失败！')
          // })
      }
    }
  }
}
</script>

<style scoped>
.info{
  margin-top: 100px;
}
  .card-content{
    margin-right: -20px;
    margin-left: -20px;
  }
  .row{
    margin-bottom: 15px;
    margin-top: -10px;
  }
  .text{
    color: black;
font-size: 18px;
  }
  .backButton{
    margin-right: 10px;
    float: right
    /*margin-left: 10px;*/
  }
  .refreshButton{
    margin-right: 30px;
    float: right
  }
  .firstCard{
    margin-top: -20px;
  }

</style>
